<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>申请售后服务</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/aui-flex.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="./css/after_sale.css">
    <style type="text/css">
        .faPiaoType{
            color: #fe1065 ;
            border: 1px #fe1065 solid;
        }
        .swiper {width: 100%;	height: 100%;	position: absolute;	bottom: 0;	left: 0;	background-color: #000;	overflow: hidden;	z-index: 10001;}
        .swiper .swiper-container {	width: 100%;	height: 100%;}
        .swiper .swiper-slide {overflow: hidden}
        .swiper .delete {width: 2rem;bottom: 3rem;	z-index: 2;}
        .swiper .num-show{top:5rem;position: absolute;color: #FFFFFF;text-align: center; height: 4rem;width: 100%;}

        @media screen and (max-width:321px){
            .del-img{position: relative; float: right; height: 0; top: 1px; right: 20px;}
        }
        @media screen and (min-width:321px) and (max-width:376px){
            .del-img{position: relative; float: right; height: 0; top: 1px; right: 41px;}
        }
        @media screen and (min-width:377px) and (max-width:415px){
            .del-img{position: relative; float: right; height: 0; top: 1px; right: 49px;}
        }
        @media screen and (min-width:416px) and (max-width:768px){
            .del-img{position: relative; float: right; height: 0; top: 1px; right: 149px;}
        }
    </style>
    <script type="text/javascript" src="../../js/base.js"></script>

</head>
<body  id="commentBody">
<!--<header class="aui-bar aui-bar-nav aui-bar-top">-->
    <!--<a class="aui-pull-left aui-btn goBack">-->
        <!--<span class="aui-iconfont aui-icon-left"></span>-->
    <!--</a>-->
    <!--<div class="aui-title">申请售后服务</div>-->
<!--</header>-->
<section id="app" v-cloak>
    <div v-if="navigator && navigator.onLine === true">
    <div  class="aui-grid">
        <div class="aui-row">
            <div class="aui-col-xs-3 aui-padded-l-10">
                <img v-bind:src=" getImage(afterSaleGoods.goods_image)" alt="">
            </div>

            <div class="aui-col-xs-5 aui-padded-l-10 aui-text-left">
                <div class="aui-grid-label aui-margin-0 aui-font-size-16 aui-margin-b-5 " style="width:120%">{{afterSaleGoods.goods_name}}</div>
                <div class="aui-grid-label aui-font-size-12  aui-margin-0   textCol ">{{getTypeAndColor(afterSaleGoods.attrText,0)}}</div>
                <div class="aui-grid-label aui-font-size-12  aui-margin-0  textCol" style="overflow: hidden">{{getTypeAndColor(afterSaleGoods.attrText,1)}}</div>
                <!--<div class="aui-grid-label aui-font-size-12 aui-text-danger aui-margin-0"><img src="../../icon/2-1/fenxiang.png" style="height:0.5rem"></div>-->
            </div>
            <div class="aui-col-xs-4  aui-text-right aui-padded-r-10" >
                <div class="aui-font-size-12 ">￥{{afterSaleGoods.shop_price}}</div>
                <div class="aui-grid-label aui-font-size-12 aui-margin-b-5 textCol" style="text-decoration:line-through;margin-top:0">￥{{afterSaleGoods.market_price
                    }}</div>
                <div class="aui-font-size-12 aui-margin-b-10 textCol">重量:0.020Kg</div>
                <div class="aui-grid-label aui-font-size-12 textCol">X{{afterSaleGoods.goods_number}}</div>
            </div>
        </div>

    </div>
        <div class="piaoType" style="margin-top:0.5rem">
            <div class="aui-margin-b-10">发票抬头</div>
            <div class="aui-flex-col aui-flex-item-12 ">
                <!--<div class="aui-flex-item-3 default-fapiaoType aui-bg-default">退货</div>-->
                <div class="aui-flex-item-3 default-fapiaoType" id="huanhuo" @click="chooseType(0)">换货</div>
                <div class="aui-flex-item-3 default-fapiaoType" id="weixiu" @click="chooseType(1)">维修</div>
            </div>
        </div>

    <div class=" aui-font-size-16 problemTit ">
       <div>问题描述</div>
      <div>
        <textarea type="text" cols="50" rows="20" placeholder="请您在此描述问题" v-model="content"></textarea>
      </div>
    </div>

    <div class="aui-row aui-row-padded imgBg"  >
        <div class="aui-col-xs-4" v-for="img,idx in updataImgs" style="position: relative">
            <span class="bg-del del-img" v-on:click="delImage(idx)"><img src="../../images/del-img.png"></span>
            <img  v-on:click="showClick(idx)"  v-bind:src="img.imgPath" class="upload-img-show" />
        </div>
        <div class="aui-col-xs-4 li_input_file" style="margin-left:0.5rem"  v-if="updataImgs.length <9"  v-bind:id="afterSaleGoods.goods_id" >
            <input class="input_file" type="file" id="input_file" v-on:change="addImage(event,this,afterSaleGoods.rec_id,afterSaleGoods.goods_id)">
        </div>
    </div>



    <div class="aui-btn aui-btn-info aui-btn-block submitBtn" v-on:click="commitDetail()" style="border-radius: 0;">提交</div>

    </div>
    <!--图片放大 开始-->
    <section class="swiper" v-show="isShowSwiper" v-bind:transition="'expand'">
        <div class="num-show fz14">{{bigImgIndx}}/{{updataImgs.length}}</div>
        <div class="swiper-container swiper-container-horizontal" id="mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="imgItem in updataImgs">
                    <div class="swiper-zoom-container">
                        <img class="center" v-bind:src="imgItem.imgPath" class="exampleImg" id="imgTest"  v-on:click="closeSwiper"/>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--图片放大 结束-->

    <div v-if="navigator && navigator.onLine === false" style="position:relative;" @click="goOnLine()">
        <div style="position:absolute;top:50%;left:50%;margin-top:8rem;margin-left: -3rem">
            <img src="../../icon/duanwang.png" alt="" style="width:6rem">
            <div class="aui-text-center">暂无网络</div>
        </div>

        <div  class="aui-text-center textCol" style="position:absolute;top:50%;left:50%;margin-top:15rem;margin-left: -86px">请连接网络后,点击刷新</div>
    </div>
</section>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/swiper.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/aui-toast.js"></script>
<!--<script type="text/javascript" src="../../js/aui-tab.js"></script>-->
<script type="text/javascript" src="./js/after_sale.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../js/weixin.js" ></script>

</body>
</html>